<template>
	<view class="content">
		<uni-section class="sections flex justify-between" title="店铺名称" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请输入店铺名称">
		</uni-section>
		<uni-section class="sections flex justify-between" title="姓名" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请输入姓名">
		</uni-section>
		<uni-section class="sections flex justify-between" title="电话" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请输入电话">
		</uni-section>
		<uni-section class="sections flex justify-between" title="所在地区" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请输入所在地区">
		</uni-section>
		<uni-section class="sections flex justify-between" title="详细地址" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请输入详细地址">
		</uni-section>
		<uni-section class="sections flex justify-between" title="行业分类" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请选择行业分类">
		</uni-section>
		<uni-section class="sections flex justify-between" title="营业时间" type="line">
			<uni-datetime-picker placeholder='请选择营业时间' style="margin-right: 25rpx;font-size: 24rpx;" v-model="userName" :border="false" />
		</uni-section>
		<uni-section class="sections flex justify-between" title="分段营业" type="line">
			<input class="sections-input" v-model="height" type="text" placeholder="请输入分段营业">
		</uni-section>
		<!-- <uni-section class="sections flex justify-between" title="活动价格" type="line">
			<view class="sections-input"  @click="$refs.selectPricePopup.open()">
				{{userName ? userName :'请选择'}}
			</view>
		</uni-section> -->
		<uni-section class="sections" title="店铺照片（最多9张）" type="line">
			<view class="imgs">
				<view class="img-item-item" v-for="(item,index) in addImgLists" :key="index">
					<image class="img" :src="item" mode="aspectFill"></image>
					<image class="del-img" src="/static/index/delete-picture.png" @tap="deletImg(index)" mode="">
					</image>
				</view>
				<view class="img-item-item" v-if="addImgLists.length < 9">
					<image class="img" src="/static/image/find/upload.png" mode="" @tap="choiceImgs()"></image>
				</view>
			</view>
		</uni-section>
		<view style="background-color: #fff;padding: 20rpx;">
			<view style="color: #000000;font-weight: 500;">
				产品标题
			</view>
			<textarea style="margin-top:20rpx;padding: 20rpx; width: 100%;height: 340rpx;background: #F8F8F8;border-radius: 16rpx;"
				v-model="height" placeholder="请输入产品标题" name="" id="" cols="30" rows="10"></textarea>
		</view>
		<view style="background-color: #fff;padding: 20rpx;">
			<view style="color: #000000;font-weight: 500;">
				产品描述
			</view>
			<textarea style="margin-top:20rpx;padding: 20rpx; width: 100%;height: 340rpx;background: #F8F8F8;border-radius: 16rpx;"
				v-model="height" placeholder="请输入产品描述" name="" id="" cols="30" rows="10"></textarea>
		</view>
		<view class="btn" @click="submit">
			立即发布
		</view>
		<!-- 活动价格 -->
		<uni-popup ref="selectPricePopup" :mask-click="true" type="bottom">
			<view class="selectPopup">
				<view class="selectPopup-top flex">
					<view class="title">活动价格</view>
					<image @tap="$refs.selectPricePopup.close()" src="/static/image/activity/cancle.png" mode=""></image>
				</view>
				<view class="selectPopup-title">价格区间</view>
				<view class="price-box flex">
					<input type="number" placeholder="请输入最低价" name="" id="">
					<view class="price-box-text">至</view>
					<input type="number" placeholder="请输入最高价" name="" id="">
				</view>
				<view class="selectPopup-title">一口价</view>
				<input class="selectPopup-input" v-model="addlabs" type="text" placeholder="请输入您的活动价格">
				<view class="selectPopup-tip">提示：价格区间和一口价不能同时选中；</view>
				<view class="selectPopup-btn" @click="addLable">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 遮罩层 -->
		<view class="masks" v-if="showMask"></view>
		<!-- 删除提示弹框 -->
		<uni-popup ref="popups">
			<view class="popups">
				<view class="title">是否删除该照片?</view>
				<view class="button">
					<view class="bottom" @tap="countermand">取消</view>
					<view class="bottom" @tap="wipeCache">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addlabs: '', // 添加的标签
				userName: '',
				sex: '',
				height: '',
				age: '',
				threeDimension: '',
				label: [],
				video: '',
				showMask: false, //上传视频是否展示遮罩层
				addImgLists: [], //上传图片
				isVideos: true, //视频与图片切换
				pngitem: '', //删除的某个图片
				labelItem: [{
						name: '会唱歌',
						isChecked: false
					},
					{
						name: '会聊天',
						isChecked: false
					},
					{
						name: '会玩端游王者荣耀',
						isChecked: false
					},
					{
						name: '会打CS',
						isChecked: false
					}
				]
			}
		},
		methods: {
			// 提交
			submit() {
				this.$helper.to('/pages/tabBar/activity/activeSuccess/activeSuccess?title='+'支付成功'+'&leftBtn='+'查看订单');
				return
				if (!this.userName) return this.$helper.toast('none', '请输入昵称');
				if (!this.sex) return this.$helper.toast('none', '请输入性别');
				if (!this.height) return this.$helper.toast('none', '请输入身高');
				if (!this.age) return this.$helper.toast('none', '请输入年龄');
				if (!this.threeDimension) return this.$helper.toast('none', '请输入三围');
				if (this.addImgLists.length == 0) return this.$helper.toast('none', '请上传生活照');
				if (!this.video) return this.$helper.toast('none', '请上传真人认证');
				if (this.label.length == 0) return this.$helper.toast('none', '请选择标签');
				this.$http('mine.playWithAdd', {
					userName: this.userName,
					sex: this.sex == '男' ? 1 : 2, //性别 1.男 2.女
					height: this.height,
					age: this.age,
					threeDimension: this.threeDimension,
					picture: this.addImgLists.toString(),
					label: this.label.toString(),
					video: this.video,
				}, '提交中...').then(res => {
					console.log(res, '认证')
					if (res.code == 200) {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}
				});
			},
			// 添加标签
			addLable() {
				let obj = {
					name: this.addlabs,
					isChecked: false
				}
				this.labelItem.push(obj)
				this.$refs.selectPopup.close()
			},
			// 删除视频
			deltVideo() {
				this.video = '';
				this.isVideos = true;
			},
			// 修改状态
			changeChecked(item) {
				item.isChecked = !item.isChecked;
				this.labelItem.map(ite => {
					if (ite.isChecked) {
						this.label.push(ite.name);
						this.label = this.label.filter((reptitem, index, array) => {
							return array.indexOf(reptitem) === index
						})
					}
				})
			},
			// 上传视频
			choiceVideos() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['album', 'camera'],
					compressed: true,
					maxDuration: 15,
					success: res => {
						this.showMask = true;
						let tempFilePath = [res.tempFilePath];
						uni.uploadFile({
							url: 'http://120.55.58.244:9097/system/oss/upload',
							file: tempFilePath[0],
							name: 'file',
							header: {
								Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
							},
							success: resp => {
								let tempResult = JSON.parse(resp.data);
								if (tempResult.code == 200) {
									this.showMask = false;
									this.isVideos = false;
									this.video = tempResult.data.url
								} else {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: tempResult.msg
									});
								}
							}
						});
					}
				});
			},
			// 关闭弹窗
			countermand() {
				this.$refs.popups.close();
			},
			//上传图片
			choiceImgs() {
				let isUpload = true;
				let count = 9;
				isUpload = this.addImgLists.length < 9;
				count = 9 - this.addImgLists.length;
				if (isUpload) {
					uni.chooseImage({
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'], //从相册选择
						count: count,
						success: res => {
							this.isUploadImg = true;
							uni.showLoading({
								title: '图片处理中...',
								mask: true
							});
							this.uploadimg({
								path: res.tempFilePaths
							});
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '最多只能上传九张图片',
						duration: 2000
					});
				}
			},
			//多张图片上传
			uploadimg(data) {
				let that = this;
				let i = data.i ? data.i : 0;
				let success = data.success ? data.success : 0;
				let fail = data.fail ? data.fail : 0;

				uni.showLoading({
					title: '正在上传第' + (success <= 0 ? 1 : success + 1) + '/' + data.path.length,
					mask: true
				});
				// 上传图之前先进行一次压缩
				uni.uploadFile({
					url: 'http://120.55.58.244:9097/system/oss/upload',
					file: data.path[i],
					name: 'file',
					header: {
						Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
					},
					success: resp => {
						let tempResult = JSON.parse(resp.data);
						if (tempResult.code == 200) {
							success++;
							uni.showToast({
								icon: 'none',
								title: '成功' + success + '张'
							});
							// this.tempFilePaths = this.tempFilePaths.concat([data.path[i]]);
							this.addImgLists.push(tempResult.data.url);
							console.log(this.addImgLists, 1)
						} else {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: tempResult.msg
							});
						}
					},
					fail: err => {
						fail++;
						console.log('fail:' + i + 'fail:' + fail);
					},
					complete: () => {
						if (that.isUploadImg) {
							i++;
							if (i == data.path.length) {
								//当图片传完时，停止调用
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '成功' + success + '张'
								// });
								// if (this.tempFilePaths.length >= 9) {
								// 	this.isAddShow = false;
								// }
								// if (this.imgLists.length >= 6) {
								// 	this.isAddShow = false;
								// }
							} else {
								//若图片还没有传完，则继续调用函数
								data.i = i;
								data.success = success;
								data.fail = fail;
								that.uploadimg(data); //递归，回调自己
							}
						} else {
							return;
						}
					}
				});
				return;
			},
			// 删除图片
			deletImg(pngitem) {
				this.$refs.popups.open();
				this.pngitem = pngitem
			},
			wipeCache() {
				this.$refs.popups.close();
				this.addImgLists.splice(this.pngitem, 1); //分享后的图片
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 30rpx;
		background: #fff;
	}

	.sections {
		border-bottom: 1rpx solid #EEF2FF;
	}

	.sections-input {
		width: 414rpx;
		height: 64rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #150E33;
		text-align: right;
		padding-right: 30rpx;
		margin-top: 10rpx;
	}

	.attention {
		font-size: 24rpx;
		font-weight: 400;
		color: #FF0000;
		margin-left: 20rpx;
	}

	.sections-list {
		// width: 686rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.sections-item {
		min-width: 120rpx;
		background: #fff;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
		padding: 10rpx;
		margin: 0 20rpx 8rpx 0;
		color: #999999;
		&.active {
			border: 1rpx solid #000;
			background: #F8F8F8;
			color: #000;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 15rpx;
		}

		text {
			color: #B778F6;
		}
	}

	// 上传图片或视频
	.upload-video {
		text-align: center;
		width: 686rpx;
		height: 386rpx;
		border: 1rpx solid #33333B;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;

		.noUpdata {
			.upload {
				width: 46rpx;
				height: 46rpx;
				margin: 130rpx 0 40rpx 0;
			}

			.reminder {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44rpx;
				color: #6C717A;
				opacity: 1;
			}
		}

		// 视频
		.videos {
			width: 343px;
			height: 193px;
			position: relative;
		}

		.deltVideo {
			width: 32rpx;
			height: 32rpx;
			z-index: 999;
			top: 2%;
			left: 94%;
			position: absolute;
		}

		.uploads {
			width: 686rpx;
			height: 386rpx;
		}

		.uploaded {
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

	}

	.btn {
		width: 686rpx;
		height: 88rpx;
		// background: #999;
		background: #000;
		color: #FEC92F;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 50rpx;
	}

	.selectPopup {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;

		.selectPopup-top {
			font-size: 32rpx;
			font-weight: 500;
			color: #150E33;

			.title {
				margin: 0 auto;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 10rpx;
			}
		}
		.selectPopup-tip{
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			margin-top: 16rpx;
		}
		.selectPopup-title{
			font-size: 30rpx;
			color: #000000;
			margin: 20rpx 0 20rpx 20rpx;
		}
		.price-box{
			input{
				width: 192rpx;
				height: 60rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #B5BFDA;
				padding-left: 6rpx;
			}
			.price-box-text{
				font-size: 24rpx;
				color: #000000;
				margin:10rpx 20rpx 0 20rpx;
			}
		}
		.selectPopup-input {
			width: 690rpx;
			height: 76rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin: 0 auto;
			font-size: 28rpx;
			font-weight: 400;
			color: #B5BFDA;
			// margin: 30rpx;
		}

		.selectPopup-btn {
			width: 690rpx;
			height: 90rpx;
			background: #000;
			color: #FEC92F;
			text-align: center;
			line-height: 90rpx;
			font-size: 30rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			border-radius: 50rpx;
		}
	}

	// 上传图片
	.imgs {
		width: 686rpx;
		margin: 0 auto;
		margin-top: 32rpx;
		display: flex;
		flex-wrap: wrap;

		.img-item-item {
			width: 200rpx;
			height: 200rpx;
			margin-left: 43rpx;
			margin-bottom: 43rpx;
			flex-shrink: 0;
			position: relative;

			&:nth-of-type(3n+1) {
				margin-left: 0;
			}

			.img {
				display: block;
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 1;
			}

			.del-img {
				display: block;
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 12rpx;
				right: 10rpx;
				z-index: 99;
			}
		}
	}

	// 删除提示弹框
	.popups {
		width: 540rpx;
		height: 281rpx;
		background: #fff;
		opacity: 1;
		border-radius: 24rpx;

		.title {
			height: 192rpx;
			line-height: 192rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000;
			opacity: 1;
		}

		.button {
			border-top: 1rpx solid #ddd;
			display: flex;

			.bottom {
				width: 50%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000;
				opacity: 1;
			}

			.bottom:first-child {
				border-right: 1rpx solid #ddd;
			}

			.bottom:hover {
				color: #4693FE;
			}
		}
	}
</style>